<template>
	<view v-if="on" class="xtotop" :class="show===true ? 'active' : ''" :style="`background-color: ${bgColor}; border-color: ${borColor};`" @click="toTop" @longpress="longpress">
		<view class="in">
			<view class="img" :style="bgimage"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				on: true,
				show: false,
			};
		},
		computed: {
			bgimage() {
				let color = this.color.replace('#', '%23');
				let str = 'data:image/svg+xml,%3Csvg width=\'600\' height=\'600\' viewBox=\'0 0 1024 1024\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M754.42 535.63 534.31 315.04c-3.14-4.73-7.77-8.65-13.72-10.73-3.18-1.25-6.56-1.81-9.99-1.74-0.24 0-0.44-0.12-0.70-0.12-0.33 0-0.60 0.15-0.93 0.17-3.34-0.05-6.64 0.47-9.71 1.67-6.05 2.11-10.75 6.08-13.91 10.92L265.43 535.63c-10.20 10.19-9.41 27.53 1.73 38.65 11.14 11.12 27.95 11.41 38.15 1.22 0.81-0.83 1.60-1.37 2.28-2.30l173.83-173.52 0.28 413.37c-0.16 1.08 0 1.96 0 3.04 0 13.57 12.08 24.59 27.84 24.59s28.55-11.02 28.55-24.59l0.30-416.41 173.86 173.52c0.69 0.93 1.47 1.47 2.30 2.30 10.19 10.19 26.99 9.89 38.14-1.22C763.83 563.16 764.61 545.82 754.42 535.63z\' fill=\''+color+'\'/%3E%3Cpath d=\'M865.26 209.95c0 13.85-11.22 25.08-25.08 25.08L179.67 235.03c-13.85 0-25.08-11.23-25.08-25.08l0 0c0-13.85 11.23-25.08 25.08-25.08l660.51 0C854.04 184.86 865.26 196.10 865.26 209.95L865.26 209.95z\' fill=\''+color+'\'/%3E%3C/svg%3E';
				return 'background-image: url("' + str + '")';
			},
		},
		methods: {
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0
				});
			},
			scroll(e) {
				if(this.hide===true){
					return false;
				}
				if(e.scrollTop > 600){
					this.show = true;
				}else{
					this.show = false;
				}
			},
			longpress() {
				this.on = false;
			},
		},
		props: {
			bgColor: {
				type: String,
				default: '#ffffff',
			},
			borColor: {
				type: String,
				default: '#cccccc',
			},
			color: {
				type: String,
				default: '#2b2b2b',
			}
		}
	}
</script>

<style>
.xtotop {
	position: fixed;
	z-index: 999999;
	color: #fff;
	width: 70rpx;
	height: 70rpx;
	bottom: calc(var(--window-bottom) + 60px);
	right: 16rpx;
	background-color: #fff;
	border: 1px solid #ccc;
	box-sizing: border-box;
	border-radius: 50%;
	opacity: 0;
	transform: scale(0);
	transition-duration: 0.3s;
	transition-property: opacity|transform;
	transition-timing-function: ease-out;
}
.xtotop.active {
	opacity: 1;
	transform: scale(1);
}
.xtotop .in {
	width: 54rpx;
	height: 54rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.xtotop .img {
	width: 54rpx;
	height: 54rpx;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
</style>